<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- emmet语法 -->

    <!-- .class 直接生成class,默认div-->
    <div class="class">哈哈哈哈哈</div>
    <!-- 想要生成带class的其他标签,需要 p.class -->
    <p class="class"><a href="#145">asdasd asd </a></p>
    <!-- 并列关系 .gege+.didi  -->
    <div class="gege"></div>
    <div class="didi"></div>
    <!-- 嵌套关系 ul>li*3>a -->
    <!-- 哪个要几对,就*几 -->

    <!-- 后代选择器 -->
    .cc li {}
    /* 后代选择器,以路径控制所要控制的标签 */

    <!-- 并集选择器 -->
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
    /* 并集选择器可以将多个元素选中,同时下指令,每个元素用逗号隔开 */

    <!-- 鼠标经过 -->
    a:hover{}

    <!-- 元素分类 -->
    一 块级元素
    块级元素:div p h ul li 等等 -->
    1.可以独占一行
    2.可以设置宽度高度
    3.默认宽度是父级元素的宽度
    4.块级元素可以包含任何元素
    特殊情况:p和h不能包含块级元素,其他的不影响

    二 行内元素
    行内元素:span strong em 等等
    1.一行显示多个
    2.不能设置宽度高度
    3.默认宽度是内容的宽度
    4.行内元素只能包含行内元素
    特殊情况:a链接不可以放a链接
    a链接里可以放块级元素

    <!-- 模式转换 -->
    display: inline-block;
    display: inline-block;可以把行内元素转变为块级元素,但是还是可以同一行显示
    display: block; 可以把行内元素变为块级元素,就像一个div,独占一行

    <!-- 背景图片 -->
    background-image: url(./images/bg1.png);
    <!-- background-rgba (0.0.0.1) 透明度 -->
    <!-- /* background-image: url(图片地址);背景图片 */ -->
    background-repeat: no-repeat;
    <!-- /* background-repeat: no-repeat;不平铺 */ -->
    <!-- /* background-repeat: repeat-x;横向平铺 */ -->
    <!-- /* background-repeat: repeat-y;纵向平铺 */ -->
    background-position: right bottom;
    <!-- /* background-position: 设置背景图片的位置,只写一个默认下一个为center居中 -->
    <!-- 纵向: top上 center中 bottom下 -->
    <!-- 水平: left左 center中 right右*/ -->
</body>

</html>